/**
Main stylesheet for TouchPro by www.SooperThemes.com
Author: Jurriaan Roelofs

TABLE OF CONTENTS:
0. Variables and Mixins
1. Typography
2. Layout styling
3. Styling per region
4. Form styling
5. Drupal Elements
6. Drupal Modules
7. Block Skins

*/
@import "compass/css3";
@import "base";
@import "touchpro-base";

// Themes that aren't yet converted to the bordex-box grid need this extra code
*[class|="grid"],
.block{ padding:0; }

/**
 * [ 1 ] TYPOGRAPHY
 */

body {
  font:13px/1.3em arial, verdana, 'myriad pro', myriad, sans;
}

.site-name {
  font-size:40px;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:normal;
}

h1 {
  font-size:27px;
  line-height:35px;
}

h2 {
  font-size:27px;
  line-height:35px;
}

h3,
nav li,
legend,
.mission,
.slogan,
.views-field-title {
  font-weight:bold;
  font-size:14px;
  line-height:1.3em;
}

h4 {
  font-size:13px;
  font-weight:bold;
  line-height:1.3em;
}

h5 {
  font-weight:13px;
  text-transform:uppercase;
  line-height:1.3em;
}

h6 {
  font-weight:13px;
  line-height:1.3em;
}

ul,ol {
  margin:0;
  padding:0;
}

.content ul {
  margin:0 0 0 15px;
}
.content ol {
  margin:0 0 0 20px;
}

.content {
  p,
  h1,h2,h3,h4,h5,h6,
  code, pre,
  ul, ol {
    margin-bottom:10px;
    margin-top:0;
  }
}

/**
 * [ 2 ] LAYOUT STYLING
 */

body {
 background: $lightgray;
 color:$text-color;
 a { color: $main-color; }
}

.masthead,
.region-footer {
  @include bg-gradient1;
  a { text-decoration:none; }
}

/**
 * [ 3 ] STYLING PER REGION
 */

/**
 * Header and navigation
 */
.masthead {
  z-index:2;
  padding-bottom:20px;
  position:relative;
  display:block;
  .mast {
    padding:20px;
    @include clearfix;
    z-index:2;
    position:relative;
  }
  .logo-container {
    float:left;
    padding:12px 20px 15px 20px;
    @include bg-gradient3;
    border:1px solid #000;
    margin:0 20px 0 10px;
    // for CSS PIE:
    position:relative;
  }
  nav.primary-menu {
    position:relative;
    z-index:2;
    ul {
      @media screen and (max-width:480px) {
        clear:both;
      }
      padding-top: 2em;
      float:right;
      z-index:2;
      position:relative;
      li {
        float:left;
        display:block;
        margin:0 0 20px 20px;
        line-height:1em;
        // for CSS PIE:
        position:relative;
        @media screen and (max-width:480px) {
          width:108px;
          margin-left:0;
          margin-right:20px;
        }
        a, span {
          // for CSS PIE:
          position:relative;
          padding:12px 11px;
          @include bg-gradient2;
          display:block;
          &:hover, &:focus, &.active {
            @include bg-gradient3;
            border:1px solid #000;
          }
        }
        ul {
          position:absolute;
          left:-99999em;
          background-color:#323232;
          top:auto;
          padding:0;
          margin:0;
          float:none;
          li {
            margin:0;
            a, span {
              border-top:0;
              &:hover, &:focus, &.active {
                border-top:0;
              }
            }
          }
        }
        &:hover ul, &:focus ul {
          left:auto;
        }
      }
    }
  }
}



/**
 * Main
 */

#page {
  margin-top:30px;
}

#page h2.block-title,
#page h1.node-title,
h1.page-title,
.comment h3 {
  @include bg-gradient2;
  margin-bottom:0;
  a {
    text-decoration:none;
    display:block;
  }
}


#page h2.block-title,
#page h1.node-title a,
h1.page-title {
  padding:11px 18px 12px 18px;
  min-height:37px;
  // for CSS PIE
  position:relative;
}

#page h1.node-title a {
  padding:11px 75px 12px 18px;
  min-height:37px;
}

ul.primary {
  margin: 0 20px 0 10px;
  border-bottom:0;
  li a {
    border-color:#444 #444 transparent #444;
    @include border-radius(0);
  }
}

.post-icon {
  position:absolute;
  top:0;
  right:0;
  width:60px;
  height:60px;
  @include bg-gradient3;
  border:1px solid #000;
}

.content-column .node {
  margin-bottom:40px;
  header {
    position:relative;
    .post-icon {
      @extend .post-icon;
      a {
        display:block;
        background:transparent url('../images/post-icon.png') no-repeat center center;
        width:100%;
        height:100%;
      }
    }
    &:hover .post-icon a,
    &:focus .post-icon a {
      @include rotate(360deg); @include transition;
    }
  }
  .content {
    @include bg-gradient4;
    border:1px solid #fff;
    outline:1px solid #d1d1d1;
    padding:19px;
    .user-picture {
      float:right;
      margin:0 0 4px 4px;
    }
    .author {
      color:#666;
      margin-bottom:1em;
    }
  }
  .link-wrapper {
    border:1px solid #fff;
    @include bg-gradient4;
    outline:1px solid #d1d1d1;
    color:#666;
    margin-top:1px;
    padding:10px 19px;
    overflow:hidden; /* tuck in that outline */
    ul, li, div {
      margin:0;
      padding:0;
      display:inline;
    }
    a {
      text-decoration:none;
      &:hover, &:focus { text-decoration:underline; }
    }
    ul.links {
      width:200px;
      margin-right:20px;
      float:left;
      li {
        border-right:1px solid #666;
        padding-right:4px;
        &.last,
        &:last-child { border:none; }
      }
    }
    .field-type-taxonomy-term-reference {
      .field-item {
        padding-right:4px;
        &:after {
          content:',';
        }
        &:last-child:after {
          content:'';
        }
      }
      .field-label {
        font-weight:normal;
      }
    }
  }
  &.node-imagefield {
    .content {
      padding-left:240px;
      .field-type-image,
      .field-image {
        margin-left:-220px;
        float:left;
        width:200px;
        img {
          border:1px solid #d1d1d1;
        }
      }
    }
  }
  @media screen and (max-width:480px) {
    &.node-imagefield {
      .content {
        padding-left:20px;
        .field-type-image,
        .field-image {
          margin-left:0;
          float:none;
          width:100%;
        }
      }
    }
  }
  #comments {
    font-size:92%;
    .comments-header {
      margin:1em 0 0.25em 0;
    }
    .comment {
      @include bg-gradient4;
      margin-bottom:20px;
      h3 {
        font-size:16px;
        padding:7px 19px;
      }
      .author {
        margin-bottom:1em;
      }
      .content {
        padding-left:19px;
      }
    }
  }
}

body.page-node .content-column .node,
body.page-contact .content-column .block {
  .content {
    margin-top:-9px;
  }
  #comments .content {
    margin-top:0;
  }
}

body.front .content-column .block .content {
  margin-top:0;
}


.content-column .node-sticky header .post-icon a { background-image: url('../images/post-starred.png'); }

/**
 * Sidebars, Featured, Content-top/bottom
 */

.region-sidebar-first .block,
.region-sidebar-second .block,
.region-content-top .block,
.region-content-bottom .block,
.region-featured .block,
.region-preblocks .block,
.region-postblocks .block {
  margin-bottom:20px;
  .block-content {
    border:1px solid #fff;
    outline:1px solid #d1d1d1;
    padding:19px;
    overflow:hidden;
    @include bg-gradient4;
  }
}

nav.block ul
.region-sidebar-first nav.block ul,
.region-sidebar-second nav.block ul,
.region-content-top nav.block ul,
.region-content-bottom nav.block ul,
.region-featured nav.block ul,
.region-preblocks nav.block ul,
.region-postblocks nav.block ul {
  padding:19px;
  margin:0;
}

.region-featured .block {
  header {
    position:relative;
    .post-icon {
      @extend .post-icon;
      span {
        display:block;
        background:transparent url('../images/post-starred.png') no-repeat center center;
        width:100%;
        height:100%;
        text-indent:-999999px;
        overflow:hidden;
      }
    }
  }
  .block-content {
    .pager :active { /* Styling this miraculously cures all transitioning problems on my Iphone */
      font-weight:bold; /* It doesn't really matter what styling is used */
    }
    padding:0;
    position:relative;
    border-width:0 1px 1px 1px;
    overflow:hidden; // we don't want transition effects to scroll the window in small screens
    p,ul,ol,li {
      margin:0;
      padding:0;
    }
    // Flexslider
    ul.slides,
    ul.slides li {
      position:relative;
    }
    .caption {
      position:absolute;
      bottom:0;
      //left:0;
      width:100%;
      padding:10px 0;
      background:#000;
      @include opacity(0.75);
      border-top:1px solid #fff;
      border-top:1px solid rgba(255,255,255,0.5);
      text-align:center;
      font-size:15px;
      line-height:1.2em;
      font-weight:bold;
      color:#fff;
      @media screen and (max-width:480px) {
        font-size:12px;
        padding:5px 0;
      }
      a { color:#fff;text-decoration:none; }
    }
    .wrap-cycle-pager {
      float:right;
      position:relative;
      left:-50%;
      text-align:left;
      clear:both;
      .cycle-pager {
        // Centred widthless floats by Paul O'B
        // see http://pmob.co.uk/pob/centred-float.htm
        list-style:none;
        position:relative;
        left:50%;
        padding-top:3px;
      }
    }
    .wrap-cycle-pager,
    .flex-control-nav {
      li {
        float:left;
        position:relative; // ie needs position:relative here
        display:block;
        a {
          text-decoration:none;
          width:25px;
          height:25px;
          margin:6px 5px; // this is bit difficult to hit on smartphone
          float:left;
          display:block;
          text-align:center;
          white-space:nowrap;
          text-indent:-999999px;
          background:transparent url('../images/pager-inactive.png') no-repeat center center;
          &.activeSlide,
          &.active {
            background-image:url('../images/pager-active.png');
          }
        }
      }
    }
    .flex-control-nav {
      float:right;
      a {
        cursor:pointer;
      }
    }
  }
}

#page .block-search {
  .block-content {
    border:1px solid #d1d1d1;
    height:58px;
    position:relative;
    outline:none;
    padding:0;
  }
  .form-item {
    margin:0;
  }
  .form-actions {
    position:absolute;
    top:0;
    right:0;
    height:58px;
    width:58px;
    @include bg-gradient3;
    .form-submit {
      height:58px;
      width:58px;
      margin:0;
      @include border-radius(0);
      border:none;
      text-indent:-999999px;
      *text-indent:0;
      *font-size:1px;
      *color:#333;
      overflow:hidden;
      @include magic-border(0.88);
      background:transparent url('../images/search.png') no-repeat center center;
    }
  }
  .form-type-textfield {
    margin-right:58px;
    display:block;
  }
  .form-text {
    width:100%;
    font-size:24px;
    height:57px;
    padding:20px 0 0 20px;
    @include bg-gradient4;
    color:#cbcbcb;
    border:none;
    @include magic-border();
    @include border-radius(0);
  }
  .overlabel-apply {
    clip:auto;
    position:absolute;
    bottom:4px;
    left:20px;
    font-size:24px;
    color:#cbcbcb;
    font-weight:normal;
  }
}

/* Navigation blocks */

#page nav.block {
  .content {
    padding:0;
  }
  ul {
    padding:0;
    font-weight:normal;
    li a {
      display:block;
      padding:12px 40px 12px 20px;
      border-top:1px solid #fff;
      border-bottom:1px solid #d1d1d1;
      text-decoration:none;
      color: $text-color;
      position:relative;
      &:hover { text-decoration:underline; }
    }
    li.last a,
    li.views-row-last a,
    li:last-child a {
      border-bottom:none;
    }
  }
}

#page nav.block li a:after {
  content:'';
  position:absolute;
  top:50%;
  right:20px;
  width:21px;
  height:21px;
  margin-top:-10px;
  background:url('../images/list-nav.png') no-repeat 96% center;
}

#page nav.block li a:hover:after {
  right:23px;
  @include transition;
}

/**
 * Twitter Block
 */

.tweets-pulled-listing ul {
  margin:0;
  padding:0;
  @include bg-gradient4;
  border:1px solid #fff;
  outline:1px solid #d1d1d1;
  li {
    display:block;
    padding:12px 40px 12px 20px;
    border-top:1px solid #fff;
    border-bottom:1px solid #d1d1d1;
    text-decoration:none;
    color: $text-color;
    position:relative;
    &:last-child {
      border-bottom:none;
    }
  }
}

/**
 * Footer
 */

.region-footer {
  padding:10px 0;
}

.region-footer,
.region-footer a {
  font-size:15px;
  font-weight:normal;
  @include single-text-shadow;
  display:block;
  padding:4px 0;
  color:#999;
  &:hover, &:focus {
    color:#fff;
    @include single-transition(all,700ms);
  }
}

.region-footer h2.block-title {
  font-size:15px;
  @include single-text-shadow;
  color:#ddd;
}

.region-footer ul {
  list-style:none;
  list-style-type:none;
  margin:0;
  padding:0;
  li {
    padding:4px 0;
    margin:0;
  }
}

.view-id-categories ul li {
  float:left;
  margin-right:0.5em;
  a {
    display:block;
    float:left;
    word-wrap:normal; // ie7 was totally tripping on this
  }
  a:after {
    content:',';
    color:#ddd;
  }
}

/**
 * [ 4 ] FORM STYLING
 */

h2.comment-form {
  margin:20px;
}

.content-column form {
    @include bg-gradient4;
    border:1px solid #fff;
    outline:1px solid #d1d1d1;
    padding:19px;
}

/**
* [ 5 ] DRUPAL ELEMENTS
*/

.tabs.secondary {
  clear:both;
  margin-top:20px;
}

#page .wrap-columns .contextual-links {
  li a {
    padding:4px;
    font-size:12px;
  }
  li a:after {
    display:none;
  }
}


//
// Basic Shortcode Library
//

body a.sc-button {
  @include border-radius(0.2em);
  background-color:#004D7D;
}